<template>
  <a-button @click="index = 0" :class="{ active: index === 0 }">普通地图</a-button>
  <a-button @click="index = 1" :class="{ active: index === 1 }">地图飞线</a-button>
  <a-button @click="index = 2" :class="{ active: index === 2 }">地图下钻</a-button>
  <a-button @click="index = 3" :class="{ active: index === 3 }">高度地图</a-button>
  <MapView v-if="index === 0" />
  <MapFlyLine v-if="index === 1" />
  <MapDown v-if="index === 2" />
  <AMap v-if="index === 3" />
</template>

<script lang="ts" setup>
import MapView from './MapView.vue'
import MapFlyLine from './MapFlyLine.vue'
import MapDown from './MapDown.vue'
import AMap from './AMap.vue'
const index = ref(0)
</script>

<style scoped>
.active {
    color: red !important;
}
</style>
